<template>
	<view class="wrap">
		<view class="loginTit">
			手机号登录
		</view>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item  :label-position="labelPosition"
				label="手机号码" prop="phone" label-width="150">
				<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="" prop="code" label-width="150">
				<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
				<text class="djs" slot="right" @click="getCode">{{codeTips}}</text>
				<!-- <u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button> -->
			</u-form-item>

		</u-form>
		<u-button ripple-bg-color="#fa84aa" shape="circle" :ripple="true" class="btn" type="error" @click="submit">登&nbsp;录
		</u-button>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>

	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				model: {
					phone: '',
					code: ''
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],

				},
				border: false,
				check: false,

				labelPosition: 'top',
				codeTips: '',
				errorType: ['message'],
			};
		},

		
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						
						console.log('验证通过');
						
						uni.switchTab({
							url:"../search/search"
						})
					} else {
						console.log('验证失败');
					}
				});
			},

			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.loginTit{
		padding: 230rpx 0 40rpx 0;
		font-size: 20px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		line-height: 34px;
		color: #333333;
	}
	.wrap {
		padding: 60rpx;
	}

	.btn {
		height: 90rpx;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		margin-top: 96rpx;
		box-shadow: 0px 5px 9px rgba(255, 100, 93, 0.4);
	}

	.djs {
		color: #FF6146;
	}
</style>
